<template>
  <div>
    <!-- 外层dialog -->
    <el-dialog
      title="车辆配置"
      :visible="dialogVisible"
      width="30%"
      @close="close"
    >
      <el-row>配置车辆需满足以下条件</el-row>
      <div>
        <el-row type="flex" justify="space-between" style="align-items: center; line-height: 20px; margin-top: 10px;">
          <div style="display: flex; justify-content: space-between;">
            <div class="number"><span>1</span></div>
            <span>司机信息已完善</span>
          </div>
          <div style="display: flex; justify-content: space-between;">
            <div class="number"><span>2</span></div>
            <span>司机已设置排班</span>
          </div>
        </el-row>
        <el-row type="flex" style="align-items: center; line-height: 20px;  margin-top: 10px;">
          <div style="display: flex; justify-content: space-between;">
            <div class="number"><span>3</span></div>
            <span>司机绑定车辆未在启用状态</span>
          </div>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="fn">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 内层dialog -->
    <el-dialog
      width="50%"
      title="配置车辆"
      :visible.sync="innerVisible"
      append-to-body
    >
      <div>
        <div class="head">
          <el-row type="flex" justify="space-around" style="margin-bottom: 20px;">
            <el-col :span="3">司机编号：</el-col>
            <el-col :span="8">{{ rows.id }}</el-col>
            <el-col :span="3">司机名称：</el-col>
            <el-col :span="8">{{ rows.name }}</el-col>
          </el-row>

          <el-row type="flex" justify="space-around">
            <el-col :span="3">司机电话：</el-col>
            <el-col :span="8">{{ rows.mobile }}</el-col>
            <el-col :span="3">所属机构：</el-col>
            <el-col :span="8">{{ rows.agency.name }}</el-col>
          </el-row>
        </div>
        <div class="body" style="padding: 25px 0;">
          <el-row>
            <span>配置车辆：</span>
            <el-select v-model="value" clearable placeholder="请选择" @change="tableList">
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.licensePlate"
                :value="item.id"
              />
            </el-select>
          </el-row>
          <div style="border: 1px solid #ebeef5; margin-top: 20px;">
            <el-table
              :header-cell-style="{ background: '#f8faff' }"
              :data="selectData"
              style="width: 100%;"
              header-align="center"
            >
              <el-table-column
                prop="licensePlate"
                label="车牌号"
              />
              <el-table-column
                prop="status"
                label="车辆状态"
              >
                <template v-slot="{row}">
                  <span v-if="row.status" class="dot">可用</span>
                  <span v-else class="dotRed">不可用</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
              >
                <template v-slot="{row}">
                  <el-button class="operate" @click="$router.push(`/vehicle-detail/${row.id}`)">查看</el-button>
                  <span>|</span>
                  <el-button class="operate" style="color: red;" @click="clear(row.id)">删除</el-button>
                </template>
              </el-table-column>
            <!-- <template slot="empty">
              <el-empty image-size="60" />
            </template> -->

            </el-table>
          </div>

        </div>
      </div>
      <!-- <el-row type="flex" justify="center"> -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit">确 定</el-button>
        <el-button @click="innerVisible = false">取 消</el-button>
      </span>
      <!-- </el-row> -->
    </el-dialog>
  </div>
</template>

<script>
import { unWorkingTrucks } from '@/api/driver'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    rows: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      innerVisible: false,
      value: '',
      list: [],
      selectData: []
    }
  },
  async created() {
    const { data } = await unWorkingTrucks()
    console.log(data)
    this.list = data
  },
  methods: {
    close() {
      this.$emit('update:dialogVisible', false)
    },
    // 打开内层对象
    fn() {
      this.innerVisible = true
      this.close()
    },
    onSubmit() {
      this.$message.error('基础数据不能被修改')
    },
    tableList(id) {
      this.selectData = this.list.filter(v => v.id === id)
    },
    clear(id) {
      this.value = ''
      this.selectData = []
    }
  }
}
</script>

<style scoped lang="scss">
  .number{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fafcff;
    display: flex;
    margin-right: 8px;
    justify-content: center;
    align-content: center;
    border: 1px solid #92a2b9;
    span{
      line-height: 20px;
    }
  }
  .head{
    padding:25px 25px 25px 40px;
    height: 100px;
    background-color: #fbfafa;
  }
  .operate{
    background-color: transparent;
    border: none;
    color:#419eff ;
  }
  .dotRed{
    &::before{
      content: '';
      position: absolute;
      top: 50%;
      transform: translate(0,-50%);
      left: -2%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color:#e15536 ;
    }
  }
  .dot{
    &::before{
      content: '';
      position: absolute;
      top: 50%;
      transform: translate(0,-50%);
      left: -2%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #1dc779;
    }
  }
::v-deep  .el-dialog__footer{
  text-align: center;
  }
</style>
